<template>
  <div class="right">
      <div class="bt" v-show="hideLeft">
        <div class="rlist">
          <div class="device">
            <div class="vr">
              <span>数据信息</span>
              <img src="@/assets/img/tyc.png" class="slideBtn"  @click="hideLeft = !hideLeft"/>
            </div>
          </div>
          <div class="exc">
            <div class="aheng">
              <div>设备名称</div>
              <div>土壤温度</div>
              <div>土壤湿度</div>
              <div>PH</div>
              <div>有机物质</div>
              <div>预警信息</div>
            </div>
            <div class="gundong">
              <div class="heng1">
                <div>墒情仪抚远</div>
                <div>-0.9℃</div>
                <div>65.4%RH</div>
                <div>5.8</div>
                <div>25</div>
                <div class="zt">良好</div>
              </div>
              <div class="heng">
                <div>墒情仪抚远</div>
                <div>-0.9℃</div>
                <div>65.4%RH</div>
                <div>5.8</div>
                <div>25</div>
                <div class="zt">良好</div>
              </div>
              <div class="heng">
                <div>墒情仪抚远</div>
                <div>-0.9℃</div>
                <div>65.4%RH</div>
                <div>5.8</div>
                <div>25</div>
                <div class="zt">良好</div>
              </div>
              <div class="heng">
                <div>墒情仪抚远</div>
                <div>-0.9℃</div>
                <div>65.4%RH</div>
                <div>5.8</div>
                <div>25</div>
                <div class="zt">良好</div>
              </div>
              <div class="heng">
                <div>墒情仪抚远</div>
                <div>-0.9℃</div>
                <div>65.4%RH</div>
                <div>5.8</div>
                <div>25</div>
                <div class="zt">良好</div>
              </div>
              <div class="heng">
                <div>墒情仪抚远</div>
                <div>-0.9℃</div>
                <div>65.4%RH</div>
                <div>5.8</div>
                <div>25</div>
                <div class="zt">良好</div>
              </div>
              <div class="heng">
                <div>墒情仪抚远</div>
                <div>-0.9℃</div>
                <div>65.4%RH</div>
                <div>5.8</div>
                <div>25</div>
                <div class="zt">良好</div>
              </div>
              <div class="heng">
                <div>墒情仪抚远</div>
                <div>-0.9℃</div>
                <div>65.4%RH</div>
                <div>5.8</div>
                <div>25</div>
                <div class="zt">良好</div>
              </div>
              <div class="heng">
                <div>墒情仪抚远</div>
                <div>-0.9℃</div>
                <div>65.4%RH</div>
                <div>5.8</div>
                <div>25</div>
                <div class="zt">良好</div>
              </div>
              <div class="heng">
                <div>墒情仪抚远</div>
                <div>-0.9℃</div>
                <div>65.4%RH</div>
                <div>5.8</div>
                <div>25</div>
                <div class="zt">良好</div>
              </div>
              <div class="heng">
                <div>墒情仪抚远</div>
                <div>-0.9℃</div>
                <div>65.4%RH</div>
                <div>5.8</div>
                <div>25</div>
                <div class="zt">良好</div>
              </div>
              <div class="heng">
                <div>墒情仪抚远</div>
                <div>-0.9℃</div>
                <div>65.4%RH</div>
                <div>5.8</div>
                <div>25</div>
                <div class="zt">良好</div>
              </div>
              <div class="heng">
                <div>墒情仪抚远</div>
                <div>-0.9℃</div>
                <div>65.4%RH</div>
                <div>5.8</div>
                <div>25</div>
                <div class="zt">良好</div>
              </div>
              <div class="heng">
                <div>墒情仪抚远</div>
                <div>-0.9℃</div>
                <div>65.4%RH</div>
                <div>5.8</div>
                <div>25</div>
                <div class="zt">良好</div>
              </div>
              <div class="heng">
                <div>墒情仪抚远</div>
                <div>-0.9℃</div>
                <div>65.4%RH</div>
                <div>5.8</div>
                <div>25</div>
                <div class="zt">良好</div>
              </div>
              <div class="heng">
                <div>墒情仪抚远</div>
                <div>-0.9℃</div>
                <div>65.4%RH</div>
                <div>5.8</div>
                <div>25</div>
                <div class="zt">良好</div>
              </div>
              <div class="heng">
                <div>墒情仪抚远</div>
                <div>-0.9℃</div>
                <div>65.4%RH</div>
                <div>5.8</div>
                <div>25</div>
                <div class="zt">良好</div>
              </div>
              <div class="heng">
                <div>墒情仪抚远</div>
                <div>-0.9℃</div>
                <div>65.4%RH</div>
                <div>5.8</div>
                <div>25</div>
                <div class="zt">良好</div>
              </div>
              <div class="heng">
                <div>墒情仪抚远</div>
                <div>-0.9℃</div>
                <div>65.4%RH</div>
                <div>5.8</div>
                <div>25</div>
                <div class="zt">良好</div>
              </div>
              <div class="heng">
                <div>墒情仪抚远</div>
                <div>-0.9℃</div>
                <div>65.4%RH</div>
                <div>5.8</div>
                <div>25</div>
                <div class="zt">良好</div>
              </div>
              <div class="heng">
                <div>墒情仪抚远</div>
                <div>-0.9℃</div>
                <div>65.4%RH</div>
                <div>5.8</div>
                <div>25</div>
                <div class="zt">良好</div>
              </div>
              <div class="heng">
                <div>墒情仪抚远</div>
                <div>-0.9℃</div>
                <div>65.4%RH</div>
                <div>5.8</div>
                <div>25</div>
                <div class="zt">良好</div>
              </div>
              <div class="heng">
                <div>墒情仪抚远</div>
                <div>-0.9℃</div>
                <div>65.4%RH</div>
                <div>5.8</div>
                <div>25</div>
                <div class="zt">良好</div>
              </div>
              <div class="heng">
                <div>墒情仪抚远</div>
                <div>-0.9℃</div>
                <div>65.4%RH</div>
                <div>5.8</div>
                <div>25</div>
                <div class="zt">良好</div>
              </div>


            </div>


          </div>
        </div>
      </div>

  </div>-->
</template>
<script>
export default {
  data() {
    return {
      hideLeft: true, //是否隐藏 slide
    };
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.parentBox {
  background: rgb(0, 25, 46);
  color: #c8c8c8;
  width: 25%;
  height: calc(100% - 100px);
  margin: 70px 2% 30px 0;
  float: right;
  // 打开的容器
  .leftSlide {
    height: 45vh;
    width: 10vw;
    z-index: 999;
    // 自己用的时候换成本地图片
    background: url(@/assets/img/lback.png);
    background-size: 100% 100%;
    background-color: rgba(11, 26, 62, 0.6);
    padding: 1vh 1vw 1vh 2vw;
    display: flex;
    flex-direction: column;
    .item {
      height: 7vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }
  // 点击按钮
  .slideBtn {
    width: 1.3vw;
    height: 5.5vh;
    position: absolute;
    top: 19.8vh;
    z-index: 999;
    //cursor: pointer;
    &.hide {
      // 自己用的时候换成本地图片
      background: url("https://i.postimg.cc/65TthkDg/sbtn.png");
      background-size: 100%;
    }
    &.show {
      // 自己用的时候换成本地图片
      background: url("https://i.postimg.cc/zBD9GWN6/sbtn1.png");
      background-size: 100%;
    }
  }

}
.right{
  width: 25%;
  height: calc(100% - 100px);
  margin: 70px 2% 30px 0;
  float: right;
}
.bt {
  width: calc(100% - 24px);
  height: 40px;
  margin-left: 24px;
  float: left;
  line-height: 40px;
}


.rlist{
  width: 25%;
  height: calc(100% - 130px);
  position: fixed;
  top: 94px;
  right: 2%;
  z-index: 1000000;
  background-image: url(@/assets/img/lback.png);
  background-size: 100%;
}
.device{
  width: 100%;
  height: 40px;
  clear: both;
}
.vr{
  width: auto;
  height: 40px;
  line-height: 40px;
  float: left;
}
.vr :nth-child(1){
  width: auto;
  height: 40px;
  margin-left: 22px;
  padding-right: 4px;
  font-size: 13px;
  font-weight: bold;
  background: linear-gradient(to top,#78bcf7 ,#f9fcff);
  -webkit-background-clip: text;
  color: transparent;
  float: left;
}
.vr :nth-child(2){
  width: 20px;
  height: 20px;
  display: block;
  margin: 10px;
  float: left;
  background-image: url(@/assets/img/button.png);
  background-size: 100% 100%;
}
.vr :nth-child(2):hover{
  color: #ffffff;
  border-bottom: rgba(76,173,255,0.7) 2px solid;
  border-top: rgba(76,173,255,0.7) 2px solid;
}
.exc{
  width: 94%;
  height: calc(100% - 80px);
  margin-left: 3%;
  color: #FFFFFF;
  font-size: 10px;
}
.aheng{
  width: 100%;
  height: 30px;
  line-height: 30px;
  color: #1be9ec;
  float: left;
}
.aheng div{
  width: 16%;
  height: 30px;
  text-align: center;
  float: left;
}
.gundong{
  width: 100%;
  height: 100%;
  overflow: auto;
}
.gundong::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 6px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.gundong::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius : 10px;
  background-color:  #3b7ca8;
  background-image: -webkit-linear-gradient(
          45deg,
          rgba(29,38,123) 25%,
          rgba(29,38,123,0.8)  50%,
          rgba(29,38,123,0.8) 75%,
  );
}
.gundong::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background : #1b3657;
  border-radius: 10px;
}
.heng1{
  width: 100%;
  height: 30px;
  margin-top: 6px;
  float: left;
  line-height: 30px;
  background: linear-gradient(to bottom,rgba(54,135,196,0.8) ,rgba(39,148,242,0) );
}
.heng1 div{
  width: 16%;
  height: 30px;
  text-align: center;
  float: left;
}
.zt{
  color: #008B8B;
}
.heng{
  width: 100%;
  height: 30px;
  margin-top: 6px;
  float: left;
  font-size: 6px;
  line-height: 30px;
  background: linear-gradient(to top,rgba(54,135,196,0.3) ,rgba(54,135,196,0) );
}
.heng div{
  width: 16%;
  height: 30px;
  text-align: center;
  float: left;
}

</style>